<template>
  <div>
    <!-- <h3>当前最新的 count 值为: {{ count }}</h3> -->
    <h3>{{ showNum }}</h3>
    <button @click="sub">-1</button>
    <br />
    <button @click="subN(unknown)">-n</button>
    <input type="text" v-model.number="unknown" />
    <br />
    <button @click="subAsync">延时1秒 -1</button>
    <br />
    <button @click="subNAsync(unknown)">延时1秒 -n</button>
    <input type="text" v-model.number="unknown" />
  </div>
</template>

<script>
// 导入 mapState, mapMutations, mapActions 的函数
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Subtraction',
  data() {
    return {
      unknown: 2
    }
  },
  computed: {
    // 获取vuex全局数据映射为计算属性
    ...mapState(['count']),
    // 获取vuex的Gerrte的处理映射为计算属性
    ...mapGetters(['showNum'])
  },
  methods: {
    // 将需要的 mutations 函数，映射为当前组件的 methods 方法
    ...mapMutations(['sub', 'subN']),
    // 将需要的 actions 异步函数，映射为当前组件的 methods 方法
    ...mapActions(['subAsync', 'subNAsync'])
  }
}
</script>

<style lang="less" scoped></style>
